import React, {
    PureComponent
} from 'react';

import {
    View,
    Text,
    Image,
    StyleSheet,
    TextInput,
    ScrollView
} from 'react-native';

import {
    Tip,
    Layout,
    Press,
    Loading
} from './../../components';

import {
    Actions
} from 'react-native-router-flux';

import connect from './../../utils/connect';

import * as types from './../../state/types/location';
import locationAction from './../../state/actions/location';

import location_icon from './../../images/location/location.png';
import search_icon from './../../images/location/search_location.png';

interface Props {
    location: any,
    showAll: boolean,
    showHot: boolean,
    onChange:Function,
    locationActions: any
}

interface State {
    keyword: string
}

@connect([`location`], {
    locationActions: locationAction
})
class Location extends PureComponent<Props, State> {
    state = {
        keyword: ``
    }

    static defaultProps = {
        location:{},
        showAll: true,
        showHot: true,
        onChange:() => null,
        locationActions:{}
    }

    get locationActions() {
        const {
            locationActions
        } = this.props;
        return locationActions;
    }

    get location() {
        const {
            location
        } = this.props;
        return location;
    }

    componentDidMount() {
        const {
            showHot
        } = this.props;

        this.locationActions[
            types.getCurrentLocation
        ]()

        if (showHot) {
            this.locationActions[
                types.getHotCity
            ]()
        }
    }

    get hots() {
        const {
            hots = []
        } = this.location;
        return hots;
    }

    get curLocation() {
        const {
            current = {}
        } = this.location;
        return current;
    }

    get currentLabel() {
        const {
            city = {}
        } = this.curLocation;
        return city.label
    }

    private _onChangeText = (text:string) => {
        this.setState({
            keyword: text
        })
    }

    private _onSearch = async () => {
        const {
            keyword
        } = this.state;
        Loading.show();
        try {
            await this.locationActions[
                types.getLocationByKeyword
            ](keyword);
        }
        catch (e) {
            Tip.warm({
                message:e.message
            })
        }
        Loading.close();
    }

    get allItem() {
        const item = {
            id: 0,
            label: ``
        }
        const {
            showAll
        } = this.props;

        return showAll ? [{
            country: item,
            state: item,
            city: item
        }] : [];
    }

    get renderList() {
        const {
            showHot
        } = this.props;

        const {
            list = []
        } = this.location;

        const hots = (
            showHot ? this.hots : []
        )

        return [
            ...this.allItem,
            ...hots,
            ...list
        ]
    }

    private getLabel(item:any) {
        const {
            state = {},
            city = {},
            country = {}
        } = item;
        return [
            city.label,
            state.label,
            country.label
        ].filter(v => !!v).join(`/`) || `ALL`
    }

    private _onPress = (item:any) => {
        const {
            onChange
        } = this.props;
        onChange(item);
        Actions.pop();
    }

    private _onPressCurrent = () => {
        this._onPress(this.curLocation)
    }

    render() {
        const {
            keyword
        } = this.state;

        return (
            <Layout
                fixed={true}
                scroll={false}
                padding={false}
                title="Location"
            >
                <View style={styles.container}>
                    <View style={styles.searchForm}>
                        <TextInput
                            value={keyword}
                            style={styles.inputStyle}
                            placeholderTextColor="#4a4a4a"
                            onSubmitEditing={this._onSearch}
                            onChangeText={this._onChangeText}
                            placeholder="Input city here. Example New York"
                        />
                        <Press
                            onPress={this._onSearch}
                            style={styles.searchButton}
                        >
                            <Image source={search_icon}/>
                        </Press>
                    </View>
                </View>
                <ScrollView contentContainerStyle={styles.scrollStyle}>
                    {!!this.currentLabel && (
                        <Press
                            style={styles.item}
                            onPress={this._onPressCurrent}
                        >
                            <Text style={styles.itemText}>
                                Current location ( {this.currentLabel} )
                            </Text>
                            <Image source={location_icon}/>
                        </Press>
                    )}
                    {this.renderList.map((item, i) => (
                        <Press
                            key={i}
                            value={item}
                            style={styles.item}
                            onPress={this._onPress}
                        >
                            <Text style={styles.itemText} numberOfLines={1}>
                                {this.getLabel(item)}
                            </Text>
                        </Press>
                    ))}
                </ScrollView>
            </Layout>
        )
    }
}

export default Location;


const styles = StyleSheet.create({
    container: {
        paddingTop:16,
        paddingHorizontal:16
    },
    scrollStyle:{
        paddingHorizontal:16
    },
    searchForm: {
        height: 48,
        paddingLeft: 16,
        borderRadius: 4,
        flexDirection: `row`,
        backgroundColor: `#fff`,
        marginBottom: 16
    },
    inputStyle: {
        flex: 1,
        fontSize: 16,
        color: `#454545`
    },
    searchButton: {
        width: 48,
        height: 48,
        alignItems: `center`,
        justifyContent: `center`
    },
    item: {
        height: 48,
        borderRadius: 4,
        marginBottom: 16,
        alignItems: `center`,
        flexDirection: `row`,
        backgroundColor: `#fff`,
        paddingHorizontal: 16
    },
    itemText: {
        flex: 1,
        fontSize: 16,
        color: `#333`
    }
}) as any;